 <template>
  <div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
    <side-bar :background-color="sidebarBackground" short-title="Argon" title="Argon">
      <template slot="links">
        <sidebar-item
          :link="{
            name: '主面板',
            icon: 'ni ni-tv-2 text-primary',
            path: '/dashboard'
          }"
        />
        <sidebar-item
          :link="{name: '广告活动', icon: 'ni ni-planet text-blue', path: '/ldadv/ldadvlist'}"
        />
        <sidebar-item
          :link="{name: '朗读记录', icon: 'ni ni-planet text-blue', path: '/ldrecords/ldrecordslist'}"
        />
        <sidebar-item
          :link="{name: '小队记录', icon: 'ni ni-single-02 text-yellow', path: '/ldteam/ldteamslist'}"
        />
        <sidebar-item
          :link="{name: '小队图文', icon: 'ni ni-bullet-list-67 text-red', path: '/ldteam/ldteamartslist'}"
        />
        <sidebar-item :link="{name: '日记图文', icon: 'ni ni-pin-3 text-orange', path: '/riji/rjartslist'}" />
        <sidebar-item :link="{name: '每日一句', icon: 'ni ni-pin-3 text-orange', path: '/riji/rjeverysentencelist'}" />
       
        <sidebar-item
          :link="{name: '诗词文库', icon: 'ni ni-planet text-blue', path: '/ancients/ancientslist'}"
        />
        <sidebar-item
          :link="{name: '评论记录', icon: 'ni ni-key-25 text-info', path: '/ldcomments/ldcommentslist'}"
        />
        <sidebar-item
          :link="{name: '会员列表', icon: 'ni ni-badge text-blue', path: '/ldmember/ldmemberslist'}"
        />
         <sidebar-item
          :link="{name: '添加商品', icon: 'ni ni-circle-08 text-pink', path: '/ldshop/goods'}"
        />

         <!-- <sidebar-item
          :link="{name: '会员权限系统', icon: 'ni ni-circle-08 text-pink', path: '/ldauthslist'}"
        /> -->

         <!-- <sidebar-item
          :link="{name: '文本编辑器测试', icon: 'ni ni-circle-08 text-pink', path: '/vueeditor'}"
        /> -->
      </template>
    </side-bar>

    <div class="main-content" :data="sidebarBackground">
      <dashboard-navbar></dashboard-navbar>

      <div @click="toggleSidebar">
        <fade-transition :duration="200" origin="center top" mode="out-in">
          <!-- your content here -->

          <router-view></router-view>
        </fade-transition>
        <content-footer v-if="!$route.meta.hideFooter"></content-footer>
      </div>
    </div>
  </div>
</template>
<script>
import DashboardNavbar from "./DashboardNavbar.vue";
import ContentFooter from "./ContentFooter.vue";
import { FadeTransition } from "vue2-transitions";

export default {
  components: {
    DashboardNavbar,
    ContentFooter,
    FadeTransition
  },
  data() {
    return {
      sidebarBackground: "vue" //vue|blue|orange|green|red|primary
    };
  },
  methods: {
    toggleSidebar() {
      if (this.$sidebar.showSidebar) {
        this.$sidebar.displaySidebar(false);
      }
    }
  }
};
</script>
<style lang="scss">
</style>
